<script setup>
const categories = ref([
  { name: '前端', count: 10 },
  { name: '后端', count: 8 },
  { name: '运维', count: 5 },
  { name: '其他', count: 3 }
]);
</script>

<template>
  <div class="category-card">
    <h3>文章分类</h3>
    <ul>
      <li v-for="category in categories" :key="category.name" class="category-item">
        <span class="name">{{ category.name }}</span>
        <span class="count">{{ category.count }}</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.category-card {
  padding: var(--space);
  background: var(--white);
  border-radius: var(--radius);

  h3 {
    margin-bottom: var(--gap);
  }

  .category-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space) 0;
    cursor: pointer;
    transition: all var(--transition-duration);

    &:hover {
      color: var(--primary-color);
    }

    .count {
      color: var(--primary-color);
    }
  }
}
</style>